<template>
  <a-card v-if='isShow' :bordered="false" style="height: calc(100vh - 59px - 52px - 24px);" size='small'>
    <template slot="title">
      <div style='font-size: 20px;'>{{description}}</div>
    </template>

    <div>
      <a-form-model layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="6">
            <a-form-item label="报表名称">
              <a-input placeholder="请输入报表名称" v-model="search.likeName" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :md="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>

    <div>
      <vxe-toolbar ref="toolbarRef" custom print zoom></vxe-toolbar>
      <vxe-table
        border
        style="height: calc(100vh - 59px - 52px - 24px - 46px - 12px - 12px - 40px - 51px - 48px); overflow-y: auto"
        ref="tableRef"
        :print-config="{}"
        :data="gridOptions.data">
        <vxe-column type="seq" width="60"></vxe-column>

        <vxe-column v-for="item in gridOptions.columns.filter(item => item.field !== 'action' && item.type !== 'seq')" :field="item.field" :title="item.title">
          <template slot='header' slot-scope='{column, columnIndex, $columnIndex, _columnIndex, $rowIndex}'>
            <div>
              <div style='text-align: center'>{{column.title}}</div>
              <div><a-input v-model="search[column.field]" :placeholder="'请输入'+column.title+'搜索'" @change='inputChange()' allowClear></a-input></div>
            </div>
          </template>
        </vxe-column>

        <vxe-column field="action" title="操作">
          <template v-slot="{ row }">
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link">
                更多 <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="handlePerssion(record.id)">授权</a>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </vxe-column>
      </vxe-table>

      <vxe-pager
        :current-page.sync="ipagination.current"
        :page-size.sync="ipagination.pageSize"
        :total="ipagination.total"
        @page-change="pageChange">
      </vxe-pager>
    </div>

  </a-card>



<!--  <vxe-grid v-bind="gridOptions">
    <template #edit="{ row }">
      <a-button type="primary" size="small" @click="handleEdit(row)">编辑</a-button>
    </template>
    <template #action="{ row }">
      <div>
        <a @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handlePerssion(record.id)">授权</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </template>
  </vxe-grid>-->
</template>

<script>

  export default {
    name: 'index',
    components: { },
    data() {
      return {
        isShow: true,
        description: '测试页面',
        search: {},
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          total: 16
        },
        tableData: [
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc', flag: false, time: 1600261774531, html1: '<span style="color:red">自定义HTML</span>', img1: 'https://5b0988e595225.cdn.sohucs.com/images/20181014/dce7cdaa130440e8b609fad083877ef3.gif' },
          { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou', flag: false, time: 1600261774531, html1: '', img1: 'https://5b0988e595225.cdn.sohucs.com/images/20181014/dce7cdaa130440e8b609fad083877ef3.gif' },
          { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai', flag: true, time: 1600261774531, html1: '<span style="color:orange">自定义HTML</span>', img1: 'https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc', flag: false, time: 1600261774531, html1: '', img1: 'https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif' },
          { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai', flag: true, time: 1600261774531, html1: '', img1: 'https://5b0988e595225.cdn.sohucs.com/images/20181014/dce7cdaa130440e8b609fad083877ef3.gif' },
          { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc', flag: true, time: 1600261774531, html1: '<span style="color:blue">自定义HTML</span>', img1: 'https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif' },
          { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc', flag: false, time: 1600261774531, html1: '', img1: 'https://5b0988e595225.cdn.sohucs.com/images/20181014/dce7cdaa130440e8b609fad083877ef3.gif' },
          { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc', flag: false, time: 1600261774531, html1: '', img1: 'https://5b0988e595225.cdn.sohucs.com/images/20181014/dce7cdaa130440e8b609fad083877ef3.gif' }
        ],



        gridOptions:{
          customConfig: {
          },
          toolbarConfig: {
            zoom: true,
            custom: true
          },
          columns: [
            { type: 'seq',width: 70 },
            { field: 'name', title: 'Name',width: 160},
            { field: 'sex', title: 'Sex' ,width: 160},
            { field: 'age', title: 'Age' ,width: 160},
            { field: 'xxx', title: '从前' ,width: 160},
            { field: 'ggg', title: '后来' ,width: 160},
            { field: 'ggg', title: '后来' ,width: 160},
            { field: 'ggg', title: '后来' ,width: 160},
            { field: 'ggg', title: '后来' ,width: 160},
            { field: 'ggg', title: '后来' ,width: 160},
            { field: 'ggg', title: '后来' ,width: 160},
            { field: 'ggg', title: '后来' ,width: 160},
            { field: 'action', title: '操作', fixed: 'right', width: 160, slots: { default: 'action' } }
          ],
          data: [
            { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc', xxx: '1', ggg: '111111111111111122222222222222222221111111111111111111111111111111111111111' },
            { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou', xxx: '1', ggg: '1' },
            { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10005, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10006, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10007, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10008, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10009, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10010, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10011, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10012, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10013, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10014, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10015, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' },
            { id: 10016, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai', xxx: '1', ggg: '1' }
          ]
        }
      }
    },
    mounted () {
      // 将表格和工具栏进行关联
      const $table = this.$refs.tableRef
      const $toolbar = this.$refs.toolbarRef
      if ($table && $toolbar) {
        $table.connect($toolbar)
      }
    },
    methods: {

      searchQuery(){

      },

      searchReset(){

      },

      pageChange ({ pageSize, currentPage }) {
        this.ipagination.currentPage = currentPage
        this.ipagination.pageSize = pageSize

        this.gridOptions.data = [{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai', xxx: '1', ggg: '1' }];
      },

      inputChange(){
        console.log(this.search)
      },

    }
  }
</script>
<style scoped lang="less">
  /deep/
  .vxe-cell{
    white-space: normal
  }
</style>